<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
  <meta name="Generator" content="Cocoa HTML Writer">
  <meta name="CocoaVersion" content="2487.5">
  <style type="text/css">
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}
    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}
  </style>
</head>
<body>
<p class="p1">&lt;!DOCTYPE html&gt;</p>
<p class="p1">&lt;html lang="zh-CN"&gt;</p>
<p class="p1">&lt;head&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;meta charset="UTF-8"&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;title&gt;英语默写网站&lt;/title&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;script src="https://cdn.tailwindcss.com"&gt;&lt;/script&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"&gt;</p>
<p class="p2"><span class="Apple-converted-space">    </span></p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;!-- Tailwind 配置 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;script&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>tailwind.config = {</p>
<p class="p1"><span class="Apple-converted-space">            </span>theme: {</p>
<p class="p1"><span class="Apple-converted-space">                </span>extend: {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>colors: {</p>
<p class="p1"><span class="Apple-converted-space">                        </span>primary: '#3b82f6',</p>
<p class="p1"><span class="Apple-converted-space">                        </span>secondary: '#10b981',</p>
<p class="p1"><span class="Apple-converted-space">                        </span>accent: '#6366f1',</p>
<p class="p1"><span class="Apple-converted-space">                        </span>neutral: '#f3f4f6',</p>
<p class="p1"><span class="Apple-converted-space">                        </span>dark: '#1f2937'</p>
<p class="p1"><span class="Apple-converted-space">                    </span>},</p>
<p class="p1"><span class="Apple-converted-space">                    </span>fontFamily: {</p>
<p class="p1"><span class="Apple-converted-space">                        </span>sans: ['Inter', 'system-ui', 'sans-serif'],</p>
<p class="p1"><span class="Apple-converted-space">                    </span>},</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p1"><span class="Apple-converted-space">            </span>}</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;/script&gt;</p>
<p class="p2"><span class="Apple-converted-space">    </span></p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;style type="text/tailwindcss"&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>@layer utilities {</p>
<p class="p1"><span class="Apple-converted-space">            </span>.content-auto {</p>
<p class="p1"><span class="Apple-converted-space">                </span>content-visibility: auto;</p>
<p class="p1"><span class="Apple-converted-space">            </span>}</p>
<p class="p1"><span class="Apple-converted-space">            </span>.transition-height {</p>
<p class="p1"><span class="Apple-converted-space">                </span>transition: max-height 0.5s ease-in-out;</p>
<p class="p1"><span class="Apple-converted-space">            </span>}</p>
<p class="p1"><span class="Apple-converted-space">            </span>.text-shadow {</p>
<p class="p1"><span class="Apple-converted-space">                </span>text-shadow: 0 2px 4px rgba(0,0,0,0.1);</p>
<p class="p1"><span class="Apple-converted-space">            </span>}</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;/style&gt;</p>
<p class="p1">&lt;/head&gt;</p>
<p class="p1">&lt;body class="bg-gray-50 min-h-screen font-sans text-gray-800"&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;!-- 导航栏 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;nav class="bg-white shadow-sm fixed w-full z-10 transition-all duration-300"&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;div class="container mx-auto px-4 py-3 flex justify-between items-center"&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="flex items-center space-x-2"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;i class="fa fa-book text-primary text-2xl"&gt;&lt;/i&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;h1 class="text-xl font-bold text-primary"&gt;英语默写助手&lt;/h1&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div id="nav-links" class="hidden md:flex items-center space-x-6"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;a href="#" id="nav-home" class="text-gray-600 hover:text-primary transition-colors"&gt;首页&lt;/a&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;a href="#" id="nav-instructions" class="text-gray-600 hover:text-primary transition-colors"&gt;使用说明&lt;/a&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div id="user-info" class="hidden items-center space-x-2"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;span id="nav-username" class="font-medium"&gt;&lt;/span&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;button id="logout-btn" class="text-sm text-red-500 hover:text-red-700 transition-colors"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;i class="fa fa-sign-out mr-1"&gt;&lt;/i&gt;退出</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;button id="mobile-menu-btn" class="md:hidden text-gray-600"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;i class="fa fa-bars text-xl"&gt;&lt;/i&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;!-- 移动端菜单 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;div id="mobile-menu" class="hidden md:hidden bg-white border-t"&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="container mx-auto px-4 py-2 flex flex-col space-y-3"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;a href="#" id="mobile-home" class="py-2 text-gray-600 hover:text-primary transition-colors"&gt;首页&lt;/a&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;a href="#" id="mobile-instructions" class="py-2 text-gray-600 hover:text-primary transition-colors"&gt;使用说明&lt;/a&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div id="mobile-user-info" class="hidden py-2 flex flex-col space-y-2"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;span id="mobile-username" class="font-medium"&gt;&lt;/span&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;button id="mobile-logout-btn" class="text-sm text-red-500 hover:text-red-700 transition-colors w-fit"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;i class="fa fa-sign-out mr-1"&gt;&lt;/i&gt;退出</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;/nav&gt;</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;!-- 主内容区 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;main class="container mx-auto px-4 pt-24 pb-16"&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;!-- 首页/角色选择 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;section id="home-page" class="py-8"&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="max-w-3xl mx-auto text-center"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-gray-800 mb-6 text-shadow"&gt;英语默写练习平台&lt;/h2&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;p class="text-gray-600 mb-10 text-lg"&gt;简单高效的多人英语默写工具，支持自定义词库和灵活的测试设置&lt;/p&gt;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="bg-white rounded-xl shadow-md p-8 mb-10 transform transition-all hover:shadow-lg"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h3 class="text-xl font-semibold mb-6 text-gray-700"&gt;请输入您的昵称&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="flex flex-col md:flex-row gap-4 items-center mb-6"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;input type="text" id="username" placeholder="请输入昵称"<span class="Apple-converted-space"> </span></p>
<p class="p1"><span class="Apple-converted-space">                            </span>class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"</p>
<p class="p1"><span class="Apple-converted-space">                            </span>maxlength="10"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;div class="text-sm text-gray-500"&gt;最多10个字符&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h3 class="text-xl font-semibold mb-6 text-gray-700"&gt;请选择您的角色&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="grid grid-cols-1 md:grid-cols-2 gap-6"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;button id="host-btn" class="group bg-primary hover:bg-primary/90 text-white py-4 px-6 rounded-lg font-medium text-lg transition-all transform hover:scale-105 flex flex-col items-center justify-center"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;i class="fa fa-user-plus text-3xl mb-3 group-hover:rotate-12 transition-transform"&gt;&lt;/i&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;span&gt;发起者&lt;/span&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;span class="text-sm mt-2 opacity-80"&gt;创建默写，设置词库和参数&lt;/span&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;button id="participant-btn" class="group bg-accent hover:bg-accent/90 text-white py-4 px-6 rounded-lg font-medium text-lg transition-all transform hover:scale-105 flex flex-col items-center justify-center"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;i class="fa fa-users text-3xl mb-3 group-hover:rotate-12 transition-transform"&gt;&lt;/i&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;span&gt;参与者&lt;/span&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;span class="text-sm mt-2 opacity-80"&gt;加入默写，进行单词默写&lt;/span&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="text-gray-500 text-sm"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;p&gt;提示：请先输入昵称，再选择角色&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;/section&gt;</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;!-- 发起者页面 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;section id="host-page" class="py-8 hidden"&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="max-w-4xl mx-auto"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="flex items-center mb-8"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;button id="host-back" class="text-gray-600 hover:text-primary transition-colors mr-4"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;i class="fa fa-arrow-left"&gt;&lt;/i&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h2 class="text-2xl font-bold text-gray-800"&gt;发起者控制面板&lt;/h2&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;!-- 词库编辑 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="bg-white rounded-xl shadow-md p-6 mb-8"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h3 class="text-xl font-semibold mb-4 flex items-center"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;i class="fa fa-book text-primary mr-2"&gt;&lt;/i&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>词库管理</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;p class="text-gray-600 mb-4 text-sm"&gt;请输入单词，每行一个单词&lt;/p&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="mb-4"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;textarea id="word-bank" rows="8" placeholder="例如：&amp;#10;apple&amp;#10;banana&amp;#10;computer&amp;#10;..."<span class="Apple-converted-space"> </span></p>
<p class="p1"><span class="Apple-converted-space">                            </span>class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all resize-none"&gt;&lt;/textarea&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="flex flex-wrap gap-3"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;button id="save-words" class="bg-secondary hover:bg-secondary/90 text-white py-2 px-4 rounded-lg font-medium transition-all flex items-center"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;i class="fa fa-save mr-2"&gt;&lt;/i&gt;保存词库</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;button id="clear-words" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded-lg font-medium transition-all flex items-center"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;i class="fa fa-trash mr-2"&gt;&lt;/i&gt;清空</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;button id="load-sample" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded-lg font-medium transition-all flex items-center"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;i class="fa fa-file-text-o mr-2"&gt;&lt;/i&gt;加载示例</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div id="word-count" class="mt-4 text-sm text-gray-500"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>词库单词数量：&lt;span id="word-count-value"&gt;0&lt;/span&gt; 个</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;!-- 默写设置 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="bg-white rounded-xl shadow-md p-6 mb-8"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h3 class="text-xl font-semibold mb-4 flex items-center"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;i class="fa fa-cog text-primary mr-2"&gt;&lt;/i&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>默写参数设置</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/h3&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="grid grid-cols-1 md:grid-cols-2 gap-6"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;label for="word-count-select" class="block text-gray-700 mb-2 text-sm"&gt;抽取单词数量&lt;/label&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;input type="number" id="word-count-select" min="1" max="50" value="10"<span class="Apple-converted-space"> </span></p>
<p class="p1"><span class="Apple-converted-space">                                </span>class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                        </span></p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;label for="display-time" class="block text-gray-700 mb-2 text-sm"&gt;展示时间（秒）&lt;/label&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;input type="number" id="display-time" min="5" max="300" value="30"<span class="Apple-converted-space"> </span></p>
<p class="p1"><span class="Apple-converted-space">                                </span>class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                        </span></p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;label for="dictation-time" class="block text-gray-700 mb-2 text-sm"&gt;默写时间（秒）&lt;/label&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;input type="number" id="dictation-time" min="10" max="600" value="60"<span class="Apple-converted-space"> </span></p>
<p class="p1"><span class="Apple-converted-space">                                </span>class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                        </span></p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;label for="word-points" class="block text-gray-700 mb-2 text-sm"&gt;每个单词分值&lt;/label&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;input type="number" id="word-points" min="1" max="10" value="2"<span class="Apple-converted-space"> </span></p>
<p class="p1"><span class="Apple-converted-space">                                </span>class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;!-- 邀请和开始 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="bg-white rounded-xl shadow-md p-6"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h3 class="text-xl font-semibold mb-4 flex items-center"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;i class="fa fa-play-circle text-primary mr-2"&gt;&lt;/i&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>开始默写</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/h3&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="mb-6"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;label class="block text-gray-700 mb-2 text-sm"&gt;默写房间代码&lt;/label&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;div class="flex"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;input type="text" id="room-code" readonly<span class="Apple-converted-space"> </span></p>
<p class="p1"><span class="Apple-converted-space">                                </span>class="flex-1 px-4 py-3 bg-gray-100 border border-gray-300 rounded-l-lg focus:outline-none text-center font-mono"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;button id="copy-code" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-3 px-4 rounded-r-lg transition-all"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                                </span>&lt;i class="fa fa-copy"&gt;&lt;/i&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;p class="text-sm text-gray-500 mt-2"&gt;将此代码分享给参与者，让他们加入你的默写&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div id="participants-list" class="mb-6"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;h4 class="font-medium text-gray-700 mb-2"&gt;已加入的参与者&lt;/h4&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;div id="participants-container" class="min-h-[60px] bg-gray-50 rounded-lg p-3"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;p class="text-gray-500 text-sm italic"&gt;等待参与者加入...&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;button id="start-dictation" class="w-full bg-primary hover:bg-primary/90 text-white py-3 px-6 rounded-lg font-medium text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;i class="fa fa-play mr-2"&gt;&lt;/i&gt;开始默写</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;/section&gt;</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;!-- 参与者页面 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;section id="participant-page" class="py-8 hidden"&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="max-w-2xl mx-auto"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="flex items-center mb-8"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;button id="participant-back" class="text-gray-600 hover:text-primary transition-colors mr-4"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;i class="fa fa-arrow-left"&gt;&lt;/i&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h2 class="text-2xl font-bold text-gray-800"&gt;参与者界面&lt;/h2&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;!-- 加入房间 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div id="join-room" class="bg-white rounded-xl shadow-md p-6 mb-8"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h3 class="text-xl font-semibold mb-4 flex items-center"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;i class="fa fa-key text-primary mr-2"&gt;&lt;/i&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>加入默写房间</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/h3&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="mb-4"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;label for="join-room-code" class="block text-gray-700 mb-2 text-sm"&gt;房间代码&lt;/label&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;input type="text" id="join-room-code" placeholder="输入房间代码"<span class="Apple-converted-space"> </span></p>
<p class="p1"><span class="Apple-converted-space">                            </span>class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;button id="join-btn" class="w-full bg-accent hover:bg-accent/90 text-white py-3 px-6 rounded-lg font-medium transition-all"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>加入房间</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;!-- 等待区域 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div id="waiting-area" class="bg-white rounded-xl shadow-md p-6 hidden"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="text-center py-8"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;div class="inline-block p-4 rounded-full bg-primary/10 text-primary mb-4"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;i class="fa fa-clock-o text-3xl"&gt;&lt;/i&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;h3 class="text-xl font-semibold mb-2"&gt;等待默写开始&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;p class="text-gray-600 mb-4"&gt;您已成功加入房间&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;p class="text-sm text-gray-500"&gt;房间代码: &lt;span id="current-room-code" class="font-mono"&gt;&lt;/span&gt;&lt;/p&gt;</p>
<p class="p2"><span class="Apple-converted-space">                        </span></p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;div class="mt-6"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;div class="w-full bg-gray-200 rounded-full h-2.5"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                                </span>&lt;div id="waiting-progress" class="bg-primary h-2.5 rounded-full w-0 transition-all duration-300"&gt;&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;/section&gt;</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;!-- 单词展示页面 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;section id="word-display-page" class="py-8 hidden"&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="max-w-2xl mx-auto"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="bg-white rounded-xl shadow-md p-6 text-center"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="mb-6 flex justify-between items-center"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;div class="text-gray-600"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;span id="display-role" class="font-medium"&gt;&lt;/span&gt;: &lt;span id="display-username"&gt;&lt;/span&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;div class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>剩余时间: &lt;span id="display-timer" class="font-bold"&gt;0&lt;/span&gt; 秒</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h3 class="text-xl font-semibold mb-8 text-gray-700"&gt;请记住这些单词&lt;/h3&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div id="words-display-container" class="mb-8 min-h-[200px] flex items-center justify-center"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;div id="words-display" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;!-- 单词将在这里动态显示 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div id="display-next-message" class="hidden text-green-600 font-medium"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>展示即将结束，准备开始默写...</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;/section&gt;</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;!-- 默写页面 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;section id="dictation-page" class="py-8 hidden"&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="max-w-2xl mx-auto"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="bg-white rounded-xl shadow-md p-6"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="mb-6 flex justify-between items-center"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;div class="text-gray-600"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;span id="dictation-role" class="font-medium"&gt;&lt;/span&gt;: &lt;span id="dictation-username"&gt;&lt;/span&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;div class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>剩余时间: &lt;span id="dictation-timer" class="font-bold"&gt;0&lt;/span&gt; 秒</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h3 class="text-xl font-semibold mb-4 text-gray-700"&gt;请默写刚才展示的单词&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;p class="text-gray-600 mb-6 text-sm"&gt;每行默一个单词，顺序不限&lt;/p&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="mb-6"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;textarea id="dictation-input" rows="10" placeholder="在这里输入单词，每行一个..."<span class="Apple-converted-space"> </span></p>
<p class="p1"><span class="Apple-converted-space">                            </span>class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all resize-none"&gt;&lt;/textarea&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="flex justify-between"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;div class="text-sm text-gray-500"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>已输入: &lt;span id="dictation-count"&gt;0&lt;/span&gt; 个单词</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;button id="submit-dictation" class="bg-secondary hover:bg-secondary/90 text-white py-2 px-6 rounded-lg font-medium transition-all"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>提交答案</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;/section&gt;</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;!-- 结果页面 - 参与者 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;section id="result-participant-page" class="py-8 hidden"&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="max-w-2xl mx-auto"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="bg-white rounded-xl shadow-md p-6 text-center"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="mb-6"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;div class="inline-block p-4 rounded-full bg-secondary/10 text-secondary mb-4"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;i class="fa fa-check-circle text-3xl"&gt;&lt;/i&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;h3 class="text-xl font-semibold mb-2"&gt;默写完成!&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;p class="text-gray-600"&gt;您的成绩已提交给发起者&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="mb-8 p-4 bg-gray-50 rounded-lg inline-block"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;p class="text-gray-600 mb-1"&gt;您的得分&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;p id="participant-score" class="text-4xl font-bold text-primary"&gt;0&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;p class="text-gray-500 text-sm"&gt;满分: &lt;span id="total-score"&gt;0&lt;/span&gt;&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="mb-6 text-left"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;h4 class="font-medium text-gray-700 mb-3"&gt;正确的单词:&lt;/h4&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;div id="correct-words" class="flex flex-wrap gap-2 mb-4"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;!-- 正确的单词将在这里显示 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                        </span></p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;h4 class="font-medium text-gray-700 mb-3"&gt;错误或遗漏的单词:&lt;/h4&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;div id="incorrect-words" class="flex flex-wrap gap-2"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;!-- 错误的单词将在这里显示 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;button id="participant-back-to-home" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-6 rounded-lg font-medium transition-all"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>返回首页</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;/section&gt;</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;!-- 结果页面 - 发起者 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;section id="result-host-page" class="py-8 hidden"&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="max-w-3xl mx-auto"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="flex items-center mb-6"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;button id="host-result-back" class="text-gray-600 hover:text-primary transition-colors mr-4"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;i class="fa fa-arrow-left"&gt;&lt;/i&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h2 class="text-2xl font-bold text-gray-800"&gt;默写结果统计&lt;/h2&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="bg-white rounded-xl shadow-md p-6 mb-8"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h3 class="text-xl font-semibold mb-4 text-gray-700"&gt;参与者成绩&lt;/h3&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="overflow-x-auto"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;table class="min-w-full"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;thead&gt;</p>
<p class="p1"><span class="Apple-converted-space">                                </span>&lt;tr class="bg-gray-50"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                                    </span>&lt;th class="py-3 px-4 text-left text-sm font-medium text-gray-600"&gt;排名&lt;/th&gt;</p>
<p class="p1"><span class="Apple-converted-space">                                    </span>&lt;th class="py-3 px-4 text-left text-sm font-medium text-gray-600"&gt;参与者&lt;/th&gt;</p>
<p class="p1"><span class="Apple-converted-space">                                    </span>&lt;th class="py-3 px-4 text-left text-sm font-medium text-gray-600"&gt;得分&lt;/th&gt;</p>
<p class="p1"><span class="Apple-converted-space">                                    </span>&lt;th class="py-3 px-4 text-left text-sm font-medium text-gray-600"&gt;正确率&lt;/th&gt;</p>
<p class="p1"><span class="Apple-converted-space">                                </span>&lt;/tr&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;/thead&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;tbody id="results-table-body"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                                </span>&lt;!-- 结果将在这里动态显示 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;/tbody&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/table&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="bg-white rounded-xl shadow-md p-6"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h3 class="text-xl font-semibold mb-4 text-gray-700"&gt;单词列表&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div id="all-words-list" class="flex flex-wrap gap-2 mb-6"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;!-- 所有单词将在这里显示 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="flex justify-between"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;button id="restart-dictation" class="bg-primary hover:bg-primary/90 text-white py-2 px-6 rounded-lg font-medium transition-all"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>&lt;i class="fa fa-refresh mr-1"&gt;&lt;/i&gt;重新开始</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;button id="host-back-to-home" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-6 rounded-lg font-medium transition-all"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                            </span>返回首页</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;/section&gt;</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;!-- 使用说明页面 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;section id="instructions-page" class="py-8 hidden"&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="max-w-3xl mx-auto"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="flex items-center mb-8"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;button id="instructions-back" class="text-gray-600 hover:text-primary transition-colors mr-4"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;i class="fa fa-arrow-left"&gt;&lt;/i&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h2 class="text-2xl font-bold text-gray-800"&gt;使用说明&lt;/h2&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="bg-white rounded-xl shadow-md p-6 mb-8"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h3 class="text-xl font-semibold mb-4 text-gray-700"&gt;基本介绍&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;p class="text-gray-600 mb-4"&gt;这是一个简单的英语默写网站，支持多人同时参与默写练习。您可以选择作为发起者创建默写，或作为参与者加入他人创建的默写。&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="bg-white rounded-xl shadow-md p-6 mb-8"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h3 class="text-xl font-semibold mb-4 text-gray-700"&gt;发起者操作步骤&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;ol class="list-decimal pl-5 text-gray-600 space-y-3"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;li&gt;输入昵称并选择"发起者"角色&lt;/li&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;li&gt;在词库管理区域输入单词（每行一个），并保存&lt;/li&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;li&gt;设置默写参数（抽取单词数量、展示时间、默写时间、每个单词分值）&lt;/li&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;li&gt;复制房间代码并分享给参与者&lt;/li&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;li&gt;等待参与者加入后，点击"开始默写"按钮&lt;/li&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;li&gt;默写结束后，查看所有参与者的成绩&lt;/li&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/ol&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="bg-white rounded-xl shadow-md p-6"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h3 class="text-xl font-semibold mb-4 text-gray-700"&gt;参与者操作步骤&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;ol class="list-decimal pl-5 text-gray-600 space-y-3"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;li&gt;输入昵称并选择"参与者"角色&lt;/li&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;li&gt;输入发起者提供的房间代码，点击"加入房间"&lt;/li&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;li&gt;等待发起者开始默写&lt;/li&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;li&gt;记住展示的单词&lt;/li&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;li&gt;在默写区域输入记住的单词（每行一个，顺序不限）&lt;/li&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;li&gt;提交答案后查看自己的成绩&lt;/li&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/ol&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;/section&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;/main&gt;</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;!-- 页脚 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;footer class="bg-white border-t border-gray-200 py-6"&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;div class="container mx-auto px-4 text-center text-gray-500 text-sm"&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;p&gt;英语默写助手 &amp;copy; 2023 - 简朴高效的英语默写工具&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;/footer&gt;</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;!-- 通知提示 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;div id="toast" class="fixed bottom-6 right-6 bg-gray-800 text-white px-4 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 flex items-center"&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;i id="toast-icon" class="fa fa-info-circle mr-2"&gt;&lt;/i&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;span id="toast-message"&gt;&lt;/span&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;/div&gt;</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;script&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>// 全局状态管理</p>
<p class="p1"><span class="Apple-converted-space">        </span>const state = {</p>
<p class="p1"><span class="Apple-converted-space">            </span>user: {</p>
<p class="p1"><span class="Apple-converted-space">                </span>name: '',</p>
<p class="p1"><span class="Apple-converted-space">                </span>role: '' // 'host' 或 'participant'</p>
<p class="p1"><span class="Apple-converted-space">            </span>},</p>
<p class="p1"><span class="Apple-converted-space">            </span>room: {</p>
<p class="p1"><span class="Apple-converted-space">                </span>code: '',</p>
<p class="p1"><span class="Apple-converted-space">                </span>host: '',</p>
<p class="p1"><span class="Apple-converted-space">                </span>participants: [],</p>
<p class="p1"><span class="Apple-converted-space">                </span>status: 'waiting' // 'waiting', 'displaying', 'dictating', 'finished'</p>
<p class="p1"><span class="Apple-converted-space">            </span>},</p>
<p class="p1"><span class="Apple-converted-space">            </span>settings: {</p>
<p class="p1"><span class="Apple-converted-space">                </span>wordCount: 10,</p>
<p class="p1"><span class="Apple-converted-space">                </span>displayTime: 30,</p>
<p class="p1"><span class="Apple-converted-space">                </span>dictationTime: 60,</p>
<p class="p1"><span class="Apple-converted-space">                </span>wordPoints: 2</p>
<p class="p1"><span class="Apple-converted-space">            </span>},</p>
<p class="p1"><span class="Apple-converted-space">            </span>wordBank: [],</p>
<p class="p1"><span class="Apple-converted-space">            </span>currentWords: [],</p>
<p class="p1"><span class="Apple-converted-space">            </span>results: {}</p>
<p class="p1"><span class="Apple-converted-space">        </span>};</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">        </span>// DOM 元素</p>
<p class="p1"><span class="Apple-converted-space">        </span>const elements = {</p>
<p class="p1"><span class="Apple-converted-space">            </span>// 首页</p>
<p class="p1"><span class="Apple-converted-space">            </span>homePage: document.getElementById('home-page'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>usernameInput: document.getElementById('username'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>hostBtn: document.getElementById('host-btn'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>participantBtn: document.getElementById('participant-btn'),</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 发起者页面</p>
<p class="p1"><span class="Apple-converted-space">            </span>hostPage: document.getElementById('host-page'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>hostBackBtn: document.getElementById('host-back'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>wordBankTextarea: document.getElementById('word-bank'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>saveWordsBtn: document.getElementById('save-words'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>clearWordsBtn: document.getElementById('clear-words'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>loadSampleBtn: document.getElementById('load-sample'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>wordCountValue: document.getElementById('word-count-value'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>wordCountSelect: document.getElementById('word-count-select'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>displayTimeInput: document.getElementById('display-time'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>dictationTimeInput: document.getElementById('dictation-time'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>wordPointsInput: document.getElementById('word-points'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>roomCodeInput: document.getElementById('room-code'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>copyCodeBtn: document.getElementById('copy-code'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>participantsContainer: document.getElementById('participants-container'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>startDictationBtn: document.getElementById('start-dictation'),</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 参与者页面</p>
<p class="p1"><span class="Apple-converted-space">            </span>participantPage: document.getElementById('participant-page'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>participantBackBtn: document.getElementById('participant-back'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>joinRoomCodeInput: document.getElementById('join-room-code'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>joinBtn: document.getElementById('join-btn'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>joinRoomSection: document.getElementById('join-room'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>waitingArea: document.getElementById('waiting-area'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>currentRoomCodeDisplay: document.getElementById('current-room-code'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>waitingProgress: document.getElementById('waiting-progress'),</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 单词展示页面</p>
<p class="p1"><span class="Apple-converted-space">            </span>wordDisplayPage: document.getElementById('word-display-page'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>displayRole: document.getElementById('display-role'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>displayUsername: document.getElementById('display-username'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>displayTimer: document.getElementById('display-timer'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>wordsDisplay: document.getElementById('words-display'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>displayNextMessage: document.getElementById('display-next-message'),</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 默写页面</p>
<p class="p1"><span class="Apple-converted-space">            </span>dictationPage: document.getElementById('dictation-page'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>dictationRole: document.getElementById('dictation-role'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>dictationUsername: document.getElementById('dictation-username'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>dictationTimer: document.getElementById('dictation-timer'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>dictationInput: document.getElementById('dictation-input'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>dictationCount: document.getElementById('dictation-count'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>submitDictationBtn: document.getElementById('submit-dictation'),</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 参与者结果页面</p>
<p class="p1"><span class="Apple-converted-space">            </span>resultParticipantPage: document.getElementById('result-participant-page'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>participantScore: document.getElementById('participant-score'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>totalScore: document.getElementById('total-score'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>correctWords: document.getElementById('correct-words'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>incorrectWords: document.getElementById('incorrect-words'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>participantBackToHomeBtn: document.getElementById('participant-back-to-home'),</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 发起者结果页面</p>
<p class="p1"><span class="Apple-converted-space">            </span>resultHostPage: document.getElementById('result-host-page'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>hostResultBackBtn: document.getElementById('host-result-back'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>resultsTableBody: document.getElementById('results-table-body'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>allWordsList: document.getElementById('all-words-list'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>restartDictationBtn: document.getElementById('restart-dictation'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>hostBackToHomeBtn: document.getElementById('host-back-to-home'),</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 使用说明页面</p>
<p class="p1"><span class="Apple-converted-space">            </span>instructionsPage: document.getElementById('instructions-page'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>instructionsBackBtn: document.getElementById('instructions-back'),</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 导航</p>
<p class="p1"><span class="Apple-converted-space">            </span>navHome: document.getElementById('nav-home'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>navInstructions: document.getElementById('nav-instructions'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>userInfo: document.getElementById('user-info'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>navUsername: document.getElementById('nav-username'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>logoutBtn: document.getElementById('logout-btn'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>mobileMenuBtn: document.getElementById('mobile-menu-btn'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>mobileMenu: document.getElementById('mobile-menu'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>mobileHome: document.getElementById('mobile-home'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>mobileInstructions: document.getElementById('mobile-instructions'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>mobileUserInfo: document.getElementById('mobile-user-info'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>mobileUsername: document.getElementById('mobile-username'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>mobileLogoutBtn: document.getElementById('mobile-logout-btn'),</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 通知</p>
<p class="p1"><span class="Apple-converted-space">            </span>toast: document.getElementById('toast'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>toastIcon: document.getElementById('toast-icon'),</p>
<p class="p1"><span class="Apple-converted-space">            </span>toastMessage: document.getElementById('toast-message')</p>
<p class="p1"><span class="Apple-converted-space">        </span>};</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">        </span>// 工具函数</p>
<p class="p1"><span class="Apple-converted-space">        </span>const utils = {</p>
<p class="p1"><span class="Apple-converted-space">            </span>// 显示通知</p>
<p class="p1"><span class="Apple-converted-space">            </span>showToast(message, type = 'info') {</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.toastMessage.textContent = message;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 设置图标</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.toastIcon.className = '';</p>
<p class="p1"><span class="Apple-converted-space">                </span>switch(type) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>case 'success':</p>
<p class="p1"><span class="Apple-converted-space">                        </span>elements.toastIcon.className = 'fa fa-check-circle mr-2';</p>
<p class="p1"><span class="Apple-converted-space">                        </span>break;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>case 'error':</p>
<p class="p1"><span class="Apple-converted-space">                        </span>elements.toastIcon.className = 'fa fa-exclamation-circle mr-2';</p>
<p class="p1"><span class="Apple-converted-space">                        </span>break;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>case 'warning':</p>
<p class="p1"><span class="Apple-converted-space">                        </span>elements.toastIcon.className = 'fa fa-exclamation-triangle mr-2';</p>
<p class="p1"><span class="Apple-converted-space">                        </span>break;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>default:</p>
<p class="p1"><span class="Apple-converted-space">                        </span>elements.toastIcon.className = 'fa fa-info-circle mr-2';</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 显示通知</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.toast.classList.remove('translate-y-20', 'opacity-0');</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.toast.classList.add('translate-y-0', 'opacity-100');</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 3秒后隐藏</p>
<p class="p1"><span class="Apple-converted-space">                </span>setTimeout(() =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>elements.toast.classList.remove('translate-y-0', 'opacity-100');</p>
<p class="p1"><span class="Apple-converted-space">                    </span>elements.toast.classList.add('translate-y-20', 'opacity-0');</p>
<p class="p1"><span class="Apple-converted-space">                </span>}, 3000);</p>
<p class="p1"><span class="Apple-converted-space">            </span>},</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 生成随机房间代码</p>
<p class="p1"><span class="Apple-converted-space">            </span>generateRoomCode() {</p>
<p class="p1"><span class="Apple-converted-space">                </span>const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';</p>
<p class="p1"><span class="Apple-converted-space">                </span>let code = '';</p>
<p class="p1"><span class="Apple-converted-space">                </span>for (let i = 0; i &lt; 6; i++) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>code += chars.charAt(Math.floor(Math.random() * chars.length));</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p1"><span class="Apple-converted-space">                </span>return code;</p>
<p class="p1"><span class="Apple-converted-space">            </span>},</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 从词库随机选择单词</p>
<p class="p1"><span class="Apple-converted-space">            </span>getRandomWords(wordBank, count) {</p>
<p class="p1"><span class="Apple-converted-space">                </span>if (wordBank.length &lt;= count) return [...wordBank];</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 打乱数组并取前count个</p>
<p class="p1"><span class="Apple-converted-space">                </span>const shuffled = [...wordBank].sort(() =&gt; 0.5 - Math.random());</p>
<p class="p1"><span class="Apple-converted-space">                </span>return shuffled.slice(0, count);</p>
<p class="p1"><span class="Apple-converted-space">            </span>},</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 计算分数</p>
<p class="p1"><span class="Apple-converted-space">            </span>calculateScore(submittedWords, correctWords, pointsPerWord) {</p>
<p class="p1"><span class="Apple-converted-space">                </span>const correctSet = new Set(correctWords.map(word =&gt; word.toLowerCase()));</p>
<p class="p1"><span class="Apple-converted-space">                </span>const submittedSet = new Set(submittedWords.map(word =&gt; word.toLowerCase()));</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 计算正确的单词数</p>
<p class="p1"><span class="Apple-converted-space">                </span>let correctCount = 0;</p>
<p class="p1"><span class="Apple-converted-space">                </span>submittedSet.forEach(word =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>if (correctSet.has(word)) {</p>
<p class="p1"><span class="Apple-converted-space">                        </span>correctCount++;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>correctSet.delete(word); // 防止重复计算</p>
<p class="p1"><span class="Apple-converted-space">                    </span>}</p>
<p class="p1"><span class="Apple-converted-space">                </span>});</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 计算错误或遗漏的单词</p>
<p class="p1"><span class="Apple-converted-space">                </span>const incorrect = [...correctSet]; // 剩余未被正确写出的单词</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>return {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>score: correctCount * pointsPerWord,</p>
<p class="p1"><span class="Apple-converted-space">                    </span>totalPossible: correctWords.length * pointsPerWord,</p>
<p class="p1"><span class="Apple-converted-space">                    </span>correctCount,</p>
<p class="p1"><span class="Apple-converted-space">                    </span>totalWords: correctWords.length,</p>
<p class="p1"><span class="Apple-converted-space">                    </span>correctWords: [...submittedSet].filter(word =&gt;<span class="Apple-converted-space"> </span></p>
<p class="p1"><span class="Apple-converted-space">                        </span>correctWords.some(w =&gt; w.toLowerCase() === word)</p>
<p class="p1"><span class="Apple-converted-space">                    </span>),</p>
<p class="p1"><span class="Apple-converted-space">                    </span>incorrectWords: incorrect</p>
<p class="p1"><span class="Apple-converted-space">                </span>};</p>
<p class="p1"><span class="Apple-converted-space">            </span>},</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 更新导航栏用户信息</p>
<p class="p1"><span class="Apple-converted-space">            </span>updateNavUserInfo() {</p>
<p class="p1"><span class="Apple-converted-space">                </span>if (state.user.name) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>elements.navUsername.textContent = state.user.name;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>elements.userInfo.classList.remove('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                    </span>elements.userInfo.classList.add('flex');</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>elements.mobileUsername.textContent = state.user.name;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>elements.mobileUserInfo.classList.remove('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                </span>} else {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>elements.userInfo.classList.add('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                    </span>elements.userInfo.classList.remove('flex');</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>elements.mobileUserInfo.classList.add('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p1"><span class="Apple-converted-space">            </span>},</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 切换页面</p>
<p class="p1"><span class="Apple-converted-space">            </span>showPage(pageId) {</p>
<p class="p1"><span class="Apple-converted-space">                </span>// 隐藏所有页面</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.homePage.classList.add('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.hostPage.classList.add('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.participantPage.classList.add('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.wordDisplayPage.classList.add('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.dictationPage.classList.add('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.resultParticipantPage.classList.add('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.resultHostPage.classList.add('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.instructionsPage.classList.add('hidden');</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 显示指定页面</p>
<p class="p1"><span class="Apple-converted-space">                </span>switch(pageId) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>case 'home':</p>
<p class="p1"><span class="Apple-converted-space">                        </span>elements.homePage.classList.remove('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                        </span>break;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>case 'host':</p>
<p class="p1"><span class="Apple-converted-space">                        </span>elements.hostPage.classList.remove('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                        </span>break;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>case 'participant':</p>
<p class="p1"><span class="Apple-converted-space">                        </span>elements.participantPage.classList.remove('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                        </span>break;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>case 'word-display':</p>
<p class="p1"><span class="Apple-converted-space">                        </span>elements.wordDisplayPage.classList.remove('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                        </span>break;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>case 'dictation':</p>
<p class="p1"><span class="Apple-converted-space">                        </span>elements.dictationPage.classList.remove('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                        </span>break;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>case 'result-participant':</p>
<p class="p1"><span class="Apple-converted-space">                        </span>elements.resultParticipantPage.classList.remove('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                        </span>break;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>case 'result-host':</p>
<p class="p1"><span class="Apple-converted-space">                        </span>elements.resultHostPage.classList.remove('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                        </span>break;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>case 'instructions':</p>
<p class="p1"><span class="Apple-converted-space">                        </span>elements.instructionsPage.classList.remove('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                        </span>break;</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 关闭移动菜单</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.mobileMenu.classList.add('hidden');</p>
<p class="p1"><span class="Apple-converted-space">            </span>}</p>
<p class="p1"><span class="Apple-converted-space">        </span>};</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">        </span>// 事件监听器</p>
<p class="p1"><span class="Apple-converted-space">        </span>function setupEventListeners() {</p>
<p class="p1"><span class="Apple-converted-space">            </span>// 首页事件</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.hostBtn.addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>const username = elements.usernameInput.value.trim();</p>
<p class="p1"><span class="Apple-converted-space">                </span>if (!username) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>utils.showToast('请输入昵称', 'error');</p>
<p class="p1"><span class="Apple-converted-space">                    </span>return;</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 设置用户信息</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.user.name = username;</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.user.role = 'host';</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 生成房间代码</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.room.code = utils.generateRoomCode();</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.room.host = username;</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.room.participants = [];</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 更新UI</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.roomCodeInput.value = state.room.code;</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.updateNavUserInfo();</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.showPage('host');</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.showToast('成功创建房间', 'success');</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.participantBtn.addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>const username = elements.usernameInput.value.trim();</p>
<p class="p1"><span class="Apple-converted-space">                </span>if (!username) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>utils.showToast('请输入昵称', 'error');</p>
<p class="p1"><span class="Apple-converted-space">                    </span>return;</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 设置用户信息</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.user.name = username;</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.user.role = 'participant';</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 更新UI</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.updateNavUserInfo();</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.showPage('participant');</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 发起者页面事件</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.hostBackBtn.addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>// 重置用户状态</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.user = { name: '', role: '' };</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.updateNavUserInfo();</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.showPage('home');</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.saveWordsBtn.addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>const words = elements.wordBankTextarea.value</p>
<p class="p1"><span class="Apple-converted-space">                    </span>.split('\n')</p>
<p class="p1"><span class="Apple-converted-space">                    </span>.map(word =&gt; word.trim())</p>
<p class="p1"><span class="Apple-converted-space">                    </span>.filter(word =&gt; word);</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>state.wordBank = words;</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.wordCountValue.textContent = words.length;</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.showToast(`成功保存 ${words.length} 个单词`, 'success');</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.clearWordsBtn.addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.wordBankTextarea.value = '';</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.wordBank = [];</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.wordCountValue.textContent = '0';</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.showToast('词库已清空', 'info');</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.loadSampleBtn.addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>const sampleWords = [</p>
<p class="p1"><span class="Apple-converted-space">                    </span>'apple', 'banana', 'computer', 'student', 'teacher',</p>
<p class="p1"><span class="Apple-converted-space">                    </span>'friend', 'family', 'country', 'music', 'history',</p>
<p class="p1"><span class="Apple-converted-space">                    </span>'science', 'library', 'hospital', 'restaurant', 'airport',</p>
<p class="p1"><span class="Apple-converted-space">                    </span>'morning', 'evening', 'tomorrow', 'yesterday', 'happiness'</p>
<p class="p1"><span class="Apple-converted-space">                </span>];</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.wordBankTextarea.value = sampleWords.join('\n');</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.wordBank = sampleWords;</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.wordCountValue.textContent = sampleWords.length;</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.showToast('已加载示例词库', 'success');</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.copyCodeBtn.addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.roomCodeInput.select();</p>
<p class="p1"><span class="Apple-converted-space">                </span>document.execCommand('copy');</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.showToast('房间代码已复制', 'success');</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.startDictationBtn.addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>// 验证设置</p>
<p class="p1"><span class="Apple-converted-space">                </span>if (state.wordBank.length === 0) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>utils.showToast('请先添加单词到词库', 'error');</p>
<p class="p1"><span class="Apple-converted-space">                    </span>return;</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>const wordCount = parseInt(elements.wordCountSelect.value);</p>
<p class="p1"><span class="Apple-converted-space">                </span>if (wordCount &gt; state.wordBank.length) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>utils.showToast(`单词数量不能超过词库总数(${state.wordBank.length})`, 'error');</p>
<p class="p1"><span class="Apple-converted-space">                    </span>return;</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>if (state.room.participants.length === 0) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>if (!confirm('当前没有参与者加入，确定要开始吗？')) {</p>
<p class="p1"><span class="Apple-converted-space">                        </span>return;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>}</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 保存设置</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.settings.wordCount = wordCount;</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.settings.displayTime = parseInt(elements.displayTimeInput.value);</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.settings.dictationTime = parseInt(elements.dictationTimeInput.value);</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.settings.wordPoints = parseInt(elements.wordPointsInput.value);</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 选择随机单词</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.currentWords = utils.getRandomWords(state.wordBank, wordCount);</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 更新房间状态</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.room.status = 'displaying';</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 显示单词展示页面</p>
<p class="p1"><span class="Apple-converted-space">                </span>startWordDisplay();</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 参与者页面事件</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.participantBackBtn.addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>// 重置用户状态</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.user = { name: '', role: '' };</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.updateNavUserInfo();</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.showPage('home');</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.joinBtn.addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>const roomCode = elements.joinRoomCodeInput.value.trim().toUpperCase();</p>
<p class="p1"><span class="Apple-converted-space">                </span>if (!roomCode || roomCode.length !== 6) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>utils.showToast('请输入有效的6位房间代码', 'error');</p>
<p class="p1"><span class="Apple-converted-space">                    </span>return;</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 模拟加入房间（实际应用中这里应该有服务器验证）</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.room.code = roomCode;</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.currentRoomCodeDisplay.textContent = roomCode;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 显示等待区域</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.joinRoomSection.classList.add('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.waitingArea.classList.remove('hidden');</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 模拟进度条动画</p>
<p class="p1"><span class="Apple-converted-space">                </span>let progress = 0;</p>
<p class="p1"><span class="Apple-converted-space">                </span>const interval = setInterval(() =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>progress = (progress + 1) % 100;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>elements.waitingProgress.style.width = `${progress}%`;</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>// 检查房间状态（实际应用中应该有服务器推送）</p>
<p class="p1"><span class="Apple-converted-space">                    </span>if (state.room.status === 'displaying') {</p>
<p class="p1"><span class="Apple-converted-space">                        </span>clearInterval(interval);</p>
<p class="p1"><span class="Apple-converted-space">                        </span>startWordDisplay();</p>
<p class="p1"><span class="Apple-converted-space">                    </span>}</p>
<p class="p1"><span class="Apple-converted-space">                </span>}, 100);</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.showToast('已加入房间，等待开始', 'success');</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 默写页面事件</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.dictationInput.addEventListener('input', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>const words = elements.dictationInput.value</p>
<p class="p1"><span class="Apple-converted-space">                    </span>.split('\n')</p>
<p class="p1"><span class="Apple-converted-space">                    </span>.map(word =&gt; word.trim())</p>
<p class="p1"><span class="Apple-converted-space">                    </span>.filter(word =&gt; word);</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.dictationCount.textContent = words.length;</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.submitDictationBtn.addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>const submittedWords = elements.dictationInput.value</p>
<p class="p1"><span class="Apple-converted-space">                    </span>.split('\n')</p>
<p class="p1"><span class="Apple-converted-space">                    </span>.map(word =&gt; word.trim())</p>
<p class="p1"><span class="Apple-converted-space">                    </span>.filter(word =&gt; word);</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 计算分数</p>
<p class="p1"><span class="Apple-converted-space">                </span>const result = utils.calculateScore(</p>
<p class="p1"><span class="Apple-converted-space">                    </span>submittedWords,</p>
<p class="p1"><span class="Apple-converted-space">                    </span>state.currentWords,</p>
<p class="p1"><span class="Apple-converted-space">                    </span>state.settings.wordPoints</p>
<p class="p1"><span class="Apple-converted-space">                </span>);</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 保存结果</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.results[state.user.name] = result;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 显示结果页面</p>
<p class="p1"><span class="Apple-converted-space">                </span>showParticipantResult(result);</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 参与者结果页面事件</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.participantBackToHomeBtn.addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>// 重置状态</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.user = { name: '', role: '' };</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.room = {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>code: '',</p>
<p class="p1"><span class="Apple-converted-space">                    </span>host: '',</p>
<p class="p1"><span class="Apple-converted-space">                    </span>participants: [],</p>
<p class="p1"><span class="Apple-converted-space">                    </span>status: 'waiting'</p>
<p class="p1"><span class="Apple-converted-space">                </span>};</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.results = {};</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.updateNavUserInfo();</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.showPage('home');</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 发起者结果页面事件</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.hostResultBackBtn.addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.showPage('host');</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.restartDictationBtn.addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>// 重置结果和状态</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.results = {};</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.room.status = 'waiting';</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 重新开始</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.startDictationBtn.click();</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.hostBackToHomeBtn.addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>// 重置状态</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.user = { name: '', role: '' };</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.room = {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>code: '',</p>
<p class="p1"><span class="Apple-converted-space">                    </span>host: '',</p>
<p class="p1"><span class="Apple-converted-space">                    </span>participants: [],</p>
<p class="p1"><span class="Apple-converted-space">                    </span>status: 'waiting'</p>
<p class="p1"><span class="Apple-converted-space">                </span>};</p>
<p class="p1"><span class="Apple-converted-space">                </span>state.results = {};</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.updateNavUserInfo();</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.showPage('home');</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 使用说明页面事件</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.instructionsBackBtn.addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.showPage('home');</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 导航事件</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.navHome.addEventListener('click', (e) =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>e.preventDefault();</p>
<p class="p1"><span class="Apple-converted-space">                </span>if (state.user.role) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>// 如果已登录，询问是否返回首页（会清除状态）</p>
<p class="p1"><span class="Apple-converted-space">                    </span>if (confirm('返回首页将重置当前状态，确定吗？')) {</p>
<p class="p1"><span class="Apple-converted-space">                        </span>state.user = { name: '', role: '' };</p>
<p class="p1"><span class="Apple-converted-space">                        </span>state.room = {</p>
<p class="p1"><span class="Apple-converted-space">                            </span>code: '',</p>
<p class="p1"><span class="Apple-converted-space">                            </span>host: '',</p>
<p class="p1"><span class="Apple-converted-space">                            </span>participants: [],</p>
<p class="p1"><span class="Apple-converted-space">                            </span>status: 'waiting'</p>
<p class="p1"><span class="Apple-converted-space">                        </span>};</p>
<p class="p1"><span class="Apple-converted-space">                        </span>state.results = {};</p>
<p class="p2"><span class="Apple-converted-space">                        </span></p>
<p class="p1"><span class="Apple-converted-space">                        </span>utils.updateNavUserInfo();</p>
<p class="p1"><span class="Apple-converted-space">                        </span>utils.showPage('home');</p>
<p class="p1"><span class="Apple-converted-space">                    </span>}</p>
<p class="p1"><span class="Apple-converted-space">                </span>} else {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>utils.showPage('home');</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.navInstructions.addEventListener('click', (e) =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>e.preventDefault();</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.showPage('instructions');</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.logoutBtn.addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>if (confirm('确定要退出吗？')) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>state.user = { name: '', role: '' };</p>
<p class="p1"><span class="Apple-converted-space">                    </span>state.room = {</p>
<p class="p1"><span class="Apple-converted-space">                        </span>code: '',</p>
<p class="p1"><span class="Apple-converted-space">                        </span>host: '',</p>
<p class="p1"><span class="Apple-converted-space">                        </span>participants: [],</p>
<p class="p1"><span class="Apple-converted-space">                        </span>status: 'waiting'</p>
<p class="p1"><span class="Apple-converted-space">                    </span>};</p>
<p class="p1"><span class="Apple-converted-space">                    </span>state.results = {};</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>utils.updateNavUserInfo();</p>
<p class="p1"><span class="Apple-converted-space">                    </span>utils.showPage('home');</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 移动菜单事件</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.mobileMenuBtn.addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.mobileMenu.classList.toggle('hidden');</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.mobileHome.addEventListener('click', (e) =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>e.preventDefault();</p>
<p class="p1"><span class="Apple-converted-space">                </span>if (state.user.role) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>if (confirm('返回首页将重置当前状态，确定吗？')) {</p>
<p class="p1"><span class="Apple-converted-space">                        </span>state.user = { name: '', role: '' };</p>
<p class="p1"><span class="Apple-converted-space">                        </span>state.room = {</p>
<p class="p1"><span class="Apple-converted-space">                            </span>code: '',</p>
<p class="p1"><span class="Apple-converted-space">                            </span>host: '',</p>
<p class="p1"><span class="Apple-converted-space">                            </span>participants: [],</p>
<p class="p1"><span class="Apple-converted-space">                            </span>status: 'waiting'</p>
<p class="p1"><span class="Apple-converted-space">                        </span>};</p>
<p class="p1"><span class="Apple-converted-space">                        </span>state.results = {};</p>
<p class="p2"><span class="Apple-converted-space">                        </span></p>
<p class="p1"><span class="Apple-converted-space">                        </span>utils.updateNavUserInfo();</p>
<p class="p1"><span class="Apple-converted-space">                        </span>utils.showPage('home');</p>
<p class="p1"><span class="Apple-converted-space">                    </span>}</p>
<p class="p1"><span class="Apple-converted-space">                </span>} else {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>utils.showPage('home');</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.mobileInstructions.addEventListener('click', (e) =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>e.preventDefault();</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.showPage('instructions');</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.mobileLogoutBtn.addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>if (confirm('确定要退出吗？')) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>state.user = { name: '', role: '' };</p>
<p class="p1"><span class="Apple-converted-space">                    </span>state.room = {</p>
<p class="p1"><span class="Apple-converted-space">                        </span>code: '',</p>
<p class="p1"><span class="Apple-converted-space">                        </span>host: '',</p>
<p class="p1"><span class="Apple-converted-space">                        </span>participants: [],</p>
<p class="p1"><span class="Apple-converted-space">                        </span>status: 'waiting'</p>
<p class="p1"><span class="Apple-converted-space">                    </span>};</p>
<p class="p1"><span class="Apple-converted-space">                    </span>state.results = {};</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>utils.updateNavUserInfo();</p>
<p class="p1"><span class="Apple-converted-space">                    </span>utils.showPage('home');</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">        </span>// 单词展示逻辑</p>
<p class="p1"><span class="Apple-converted-space">        </span>function startWordDisplay() {</p>
<p class="p1"><span class="Apple-converted-space">            </span>// 更新页面信息</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.displayRole.textContent = state.user.role === 'host' ? '发起者' : '参与者';</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.displayUsername.textContent = state.user.name;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 显示单词</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.wordsDisplay.innerHTML = '';</p>
<p class="p1"><span class="Apple-converted-space">            </span>state.currentWords.forEach(word =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>const wordElement = document.createElement('div');</p>
<p class="p1"><span class="Apple-converted-space">                </span>wordElement.className = 'bg-primary/10 text-primary px-3 py-2 rounded-lg font-medium transition-all hover:bg-primary hover:text-white';</p>
<p class="p1"><span class="Apple-converted-space">                </span>wordElement.textContent = word;</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.wordsDisplay.appendChild(wordElement);</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 显示页面</p>
<p class="p1"><span class="Apple-converted-space">            </span>utils.showPage('word-display');</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 开始计时</p>
<p class="p1"><span class="Apple-converted-space">            </span>let timeLeft = state.settings.displayTime;</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.displayTimer.textContent = timeLeft;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>const timerInterval = setInterval(() =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>timeLeft--;</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.displayTimer.textContent = timeLeft;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// 最后5秒显示提示</p>
<p class="p1"><span class="Apple-converted-space">                </span>if (timeLeft &lt;= 5) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>elements.displayNextMessage.classList.remove('hidden');</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>if (timeLeft &lt;= 0) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>clearInterval(timerInterval);</p>
<p class="p1"><span class="Apple-converted-space">                    </span>startDictationPhase();</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p1"><span class="Apple-converted-space">            </span>}, 1000);</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">        </span>// 默写阶段逻辑</p>
<p class="p1"><span class="Apple-converted-space">        </span>function startDictationPhase() {</p>
<p class="p1"><span class="Apple-converted-space">            </span>// 更新房间状态</p>
<p class="p1"><span class="Apple-converted-space">            </span>state.room.status = 'dictating';</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 更新页面信息</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.dictationRole.textContent = state.user.role === 'host' ? '发起者' : '参与者';</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.dictationUsername.textContent = state.user.name;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 清空输入框</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.dictationInput.value = '';</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.dictationCount.textContent = '0';</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 显示页面</p>
<p class="p1"><span class="Apple-converted-space">            </span>utils.showPage('dictation');</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 开始计时</p>
<p class="p1"><span class="Apple-converted-space">            </span>let timeLeft = state.settings.dictationTime;</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.dictationTimer.textContent = timeLeft;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>const timerInterval = setInterval(() =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>timeLeft--;</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.dictationTimer.textContent = timeLeft;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>if (timeLeft &lt;= 0) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>clearInterval(timerInterval);</p>
<p class="p1"><span class="Apple-converted-space">                    </span>// 自动提交</p>
<p class="p1"><span class="Apple-converted-space">                    </span>elements.submitDictationBtn.click();</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p1"><span class="Apple-converted-space">            </span>}, 1000);</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">        </span>// 显示参与者结果</p>
<p class="p1"><span class="Apple-converted-space">        </span>function showParticipantResult(result) {</p>
<p class="p1"><span class="Apple-converted-space">            </span>// 更新房间状态</p>
<p class="p1"><span class="Apple-converted-space">            </span>state.room.status = 'finished';</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 更新页面信息</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.participantScore.textContent = result.score;</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.totalScore.textContent = result.totalPossible;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 显示正确的单词</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.correctWords.innerHTML = '';</p>
<p class="p1"><span class="Apple-converted-space">            </span>result.correctWords.forEach(word =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>const wordElement = document.createElement('span');</p>
<p class="p1"><span class="Apple-converted-space">                </span>wordElement.className = 'bg-green-100 text-green-800 px-2 py-1 rounded text-sm';</p>
<p class="p1"><span class="Apple-converted-space">                </span>wordElement.textContent = word;</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.correctWords.appendChild(wordElement);</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 显示错误的单词</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.incorrectWords.innerHTML = '';</p>
<p class="p1"><span class="Apple-converted-space">            </span>result.incorrectWords.forEach(word =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>const wordElement = document.createElement('span');</p>
<p class="p1"><span class="Apple-converted-space">                </span>wordElement.className = 'bg-red-100 text-red-800 px-2 py-1 rounded text-sm';</p>
<p class="p1"><span class="Apple-converted-space">                </span>wordElement.textContent = word;</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.incorrectWords.appendChild(wordElement);</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 显示页面</p>
<p class="p1"><span class="Apple-converted-space">            </span>utils.showPage('result-participant');</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 如果是发起者，同时显示发起者结果页面</p>
<p class="p1"><span class="Apple-converted-space">            </span>if (state.user.role === 'host') {</p>
<p class="p1"><span class="Apple-converted-space">                </span>showHostResults();</p>
<p class="p1"><span class="Apple-converted-space">            </span>}</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">        </span>// 显示发起者结果</p>
<p class="p1"><span class="Apple-converted-space">        </span>function showHostResults() {</p>
<p class="p1"><span class="Apple-converted-space">            </span>// 排序结果</p>
<p class="p1"><span class="Apple-converted-space">            </span>const sortedResults = Object.entries(state.results)</p>
<p class="p1"><span class="Apple-converted-space">                </span>.map(([name, result]) =&gt; ({</p>
<p class="p1"><span class="Apple-converted-space">                    </span>name,</p>
<p class="p1"><span class="Apple-converted-space">                    </span>...result</p>
<p class="p1"><span class="Apple-converted-space">                </span>}))</p>
<p class="p1"><span class="Apple-converted-space">                </span>.sort((a, b) =&gt; b.score - a.score);</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 更新表格</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.resultsTableBody.innerHTML = '';</p>
<p class="p1"><span class="Apple-converted-space">            </span>sortedResults.forEach((result, index) =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>const row = document.createElement('tr');</p>
<p class="p1"><span class="Apple-converted-space">                </span>row.className = index === 0 ? 'bg-yellow-50' : index % 2 === 0 ? 'bg-white' : 'bg-gray-50';</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>const accuracy = ((result.correctCount / result.totalWords) * 100).toFixed(1);</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>row.innerHTML = `</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;td class="py-3 px-4"&gt;${index + 1}&lt;/td&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;td class="py-3 px-4 font-medium"&gt;${result.name}&lt;/td&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;td class="py-3 px-4"&gt;${result.score}/${result.totalPossible}&lt;/td&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;td class="py-3 px-4"&gt;${accuracy}%&lt;/td&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>`;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.resultsTableBody.appendChild(row);</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 显示所有单词</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.allWordsList.innerHTML = '';</p>
<p class="p1"><span class="Apple-converted-space">            </span>state.currentWords.forEach(word =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>const wordElement = document.createElement('span');</p>
<p class="p1"><span class="Apple-converted-space">                </span>wordElement.className = 'bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm';</p>
<p class="p1"><span class="Apple-converted-space">                </span>wordElement.textContent = word;</p>
<p class="p1"><span class="Apple-converted-space">                </span>elements.allWordsList.appendChild(wordElement);</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 显示页面（仅发起者）</p>
<p class="p1"><span class="Apple-converted-space">            </span>if (state.user.role === 'host') {</p>
<p class="p1"><span class="Apple-converted-space">                </span>utils.showPage('result-host');</p>
<p class="p1"><span class="Apple-converted-space">            </span>}</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">        </span>// 初始化</p>
<p class="p1"><span class="Apple-converted-space">        </span>function init() {</p>
<p class="p1"><span class="Apple-converted-space">            </span>// 设置事件监听器</p>
<p class="p1"><span class="Apple-converted-space">            </span>setupEventListeners();</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 初始化页面</p>
<p class="p1"><span class="Apple-converted-space">            </span>utils.showPage('home');</p>
<p class="p1"><span class="Apple-converted-space">            </span>utils.updateNavUserInfo();</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// 初始化设置值</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.wordCountSelect.value = state.settings.wordCount;</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.displayTimeInput.value = state.settings.displayTime;</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.dictationTimeInput.value = state.settings.dictationTime;</p>
<p class="p1"><span class="Apple-converted-space">            </span>elements.wordPointsInput.value = state.settings.wordPoints;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">        </span>// 启动应用</p>
<p class="p1"><span class="Apple-converted-space">        </span>document.addEventListener('DOMContentLoaded', init);</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;/script&gt;</p>
<p class="p1">&lt;/body&gt;</p>
<p class="p1">&lt;/html&gt;</p>
</body>
</html>
